<!DOCTYPE html>
<html>

	<head>

		<meta charset="UTF-8">

		<title>HTML5/CSS3滑块动画菜单 图标动画很酷DEMO演示</title>

		<style>
			html,
			body,
			div,
			span,
			applet,
			object,
			iframe,
			h1,
			h2,
			h3,
			h4,
			h5,
			h6,
			p,
			blockquote,
			pre,
			a,
			abbr,
			acronym,
			address,
			big,
			cite,
			code,
			del,
			dfn,
			em,
			img,
			ins,
			kbd,
			q,
			s,
			samp,
			small,
			strike,
			strong,
			sub,
			sup,
			tt,
			var,
			b,
			u,
			i,
			center,
			dl,
			dt,
			dd,
			ol,
			ul,
			li,
			fieldset,
			form,
			label,
			legend,
			table,
			caption,
			tbody,
			tfoot,
			thead,
			tr,
			th,
			td,
			article,
			aside,
			canvas,
			details,
			embed,
			figure,
			figcaption,
			footer,
			header,
			hgroup,
			menu,
			nav,
			output,
			ruby,
			section,
			summary,
			time,
			mark,
			audio,
			video {
				margin: 0;
				padding: 0;
				border: 0;
				font-size: 100%;
				font: inherit;
				vertical-align: baseline
			}
			
			article,
			aside,
			details,
			figcaption,
			figure,
			footer,
			header,
			hgroup,
			menu,
			nav,
			section {
				display: block
			}
			
			body {
				line-height: 1
			}
			
			ol,
			ul {
				list-style: none
			}
			
			blockquote,
			q {
				quotes: none
			}
			
			blockquote:before,
			blockquote:after,
			q:before,
			q:after {
				content: '';
				content: none
			}
			
			table {
				border-collapse: collapse;
				border-spacing: 0
			}
		</style>

		<style>
			@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
			html {
				height: 100%;
			}
			
			body { text-align: center; background-repeat: no-repeat;  -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; background-position: 50% 50%; height: 100%; font-family: 'Open Sans Condensed', sans-serif; background-color: #0B0B0B; 			}
			
			body:before {
				content: "";
				display: inline-block;
				vertical-align: middle;
			}
			
			#menu {
				display: inline-block;
				height: 135px;
				width: 80%;
				vertical-align: middle;
				white-space: nowrap;
			}
			
			#menu li {
				position: relative;
				z-index: 2;
				display: block;
				float: left;
				width: 15%;
				height: 135px;
				line-height: 220px;
				margin-right: 1.42857%;
				white-space: nowrap;
				background-position: 50%;
			}
			
			.rocket {
				background: url('css/hdImg/rocket-large.png')no-repeat;
				margin-left: 1.42857%;
			}
			
			.wine {
				background: url('css/hdImg/wine-large.png')no-repeat;
			}
			
			.burger {
				background: url('css/hdImg/burger-large.png')no-repeat;
			}
			
			.comment {
				background: url('css/hdImg/comment-large.png')no-repeat;
			}
			
			.sport {
				background: url('css/hdImg/sport-large.png')no-repeat;
			}
			
			.earth {
				background: url('css/hdImg/earth-large.png')no-repeat;
			}
			
			#menu ul {
				position: relative;
			}
			
			#menu ul:after {
				content: "";
				display: block;
				clear: both;
			}
			
			#menu a {
				color: #D8D8D8;
				text-decoration: none;
				display: block;
				width: 100%;
				height: 100%;
				text-shadow: 0 -1px 0 #000;
			}
			
			#menu li:after {
				content: "";
				width: 9.5238%;
				height: 100%;
				position: absolute;
				top: 0;
				right: -9.5238%;
				background: url('css/hdImg/menu-bg.png');
			}
			
			.rocket:before {
				content: "";
				width: 9.5238%;
				height: 100%;
				position: absolute;
				top: 0;
				left: -9.5238%;
				background: url('css/hdImg/menu-bg.png');
				border-radius: 5px 0px 0px 5px;
			}
			
			.earth:after {
				border-radius: 0px 5px 5px 0px;
			}
			
			.current {
				position: absolute;
				top: -13px;
				left: 8.92857%;
				margin-left: -49px;
				width: 95px;
				height: 165px;
				-webkit-transition: all 400ms cubic-bezier(.45, 1.92, .9, 1.54);
				-moz-transition: all 400ms cubic-bezier(.45, 1.92, .9, 1.54);
				-o-transition: all 400ms cubic-bezier(.45, 1.92, .9, 1.54);
				-ms-transition: all 400ms cubic-bezier(.45, 1.92, .9, 1.54);
				transition: all 400ms cubic-bezier(.16, 1.23, .87, 1.18);
			}
			
			.current-back {
				width: 100%;
				height: 100%;
				position: absolute;
				background: #c39449;
				border-radius: 5px;
				border-bottom: 2px solid rgba(0, 0, 0, 0.09);
				border-top: 2px solid rgba(255, 255, 255, 0.1);
			}
			
			.top-arrow {
				position: absolute;
				overflow: hidden;
				width: 100%;
				height: 12px;
				top: 13px;
				left: 0;
				z-index: 2;
			}
			
			.top-arrow:before {
				content: "";
				position: absolute;
				width: 80%;
				height: 10px;
				top: -10px;
				left: 10%;
				border-radius: 20%;
				box-shadow: 0 0 10px black;
			}
			
			.top-arrow:after {
				content: "";
				position: absolute;
				width: 0;
				height: 0;
				top: 0px;
				border-top: 8px solid #c39449;
				border-left: 6px solid transparent;
				border-right: 6px solid transparent;
				margin-left: -6px;
				left: 50%;
			}
			
			.bottom-arrow {
				position: absolute;
				overflow: hidden;
				width: 100%;
				height: 12px;
				bottom: 17px;
				left: 0;
				z-index: 2;
			}
			
			.bottom-arrow:before {
				content: "";
				position: absolute;
				width: 80%;
				height: 10px;
				bottom: -10px;
				left: 10%;
				border-radius: 20%;
				box-shadow: 0 0 10px black;
			}
			
			.bottom-arrow:after {
				content: "";
				position: absolute;
				width: 0;
				height: 0;
				bottom: 0;
				border-bottom: 12px solid #c39449;
				border-left: 8px solid transparent;
				border-right: 8px solid transparent;
				margin-left: -8px;
				left: 50%;
			}
			
			.wine:hover~ .current {
				left: 25.5%;
			}
			
			.burger:hover~ .current {
				left: 42%;
			}
			
			.comment:hover~ .current {
				left: 58.5%;
			}
			
			.sport:hover~ .current {
				left: 75%;
			}
			
			.earth:hover~ .current {
				left: 91.1%;
			}
		</style>


	</head>

	<body>

		<nav id="menu">
			<div style="text-align:center;clear:both;margin-top: 100px;">

			</div>
			<ul>
				<li class="rocket">
					<a href="">Item menu 1</a>
				</li>
				<li class="wine">
					<a href="">Item menu 2</a>
				</li>
				<li class="burger">
					<a href="">Item menu 3</a>
				</li>
				<li class="comment">
					<a href="">Item menu 4</a>
				</li>
				<li class="sport">
					<a href="">Item menu 5</a>
				</li>
				<li class="earth">
					<a href="">Item menu 6</a>
				</li>
				<div class="current">
					<div class="top-arrow"></div>
					<div class="current-back"></div>
					<div class="bottom-arrow"></div>
				</div>
			</ul>
		</nav>

	</body>

</html>